<template>
  <div class="usr-info">
    <div class="my-info">
      <img class="avatar" src="~assets/img/profile/avatar.svg" alt="">

      <div class="login" @click="loginClick">
        <div>
          <div>登录/注册</div>
          <div class="phone">
            <img src="~assets/img/profile/phone.svg" alt="" class="phone-ico">
            <span class="phone-num">暂无绑定手机号</span>
          </div>
        </div>
      </div>

      <div class="right">
        <img src="~assets/img/common/arrow-left.svg" alt="">
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "UsrInfo",
    methods:{
      loginClick(){
        this.$router.push('screet')
      }
    }
  }
</script>

<style scoped>
  .right{
    width: 150px;
    background-color: var(--color-tint);
    display: flex;
    align-items: center;
  }
  .right img{
    width: 25%;
    position: relative;
    left: 45px;
  }
  .login{
    display: flex;
    align-items: center;
    background-color: var(--color-tint);
    width: 100%;
    color: #fff;
  }
  .phone{
    display: flex;
    align-items: center;
    margin-top: 4px;
  }
  .phone-ico{
    width: 20px;
    height: 20px;
  }
  .phone-num{
    font-size: 10px;
  }
  .my-info{
    display: flex;
  }
  .usr-info{
    height: 80px;
    background-color: var(--color-tint);
  }
  .avatar{
    width: 73px;
    height: 73px;
    background-color: var(--color-tint);
    margin: 0 10px;
  }
</style>